<meta charset="UTF-8">
<script src="jquery.js"></script>
<style>
    input{margin:10px 0 10px 50px;padding:3px 8px; font-size:14px;font-weight:bolder;}
    #demo{position:relative;width:630px;height:300px;background:#eee;border-top:5px solid #888;border-bottom:5px solid #888}
    .one,.two,.three,.four,.five,.six,.seven{display:block;position:absolute;left:30px;top:0;width:30px;height:30px;background:#888;color:#fff;text-align:center;font-weight:bold;line-height:30px}
    .two{left:120px}
    .three{left:210px}
    .four{left:300px}
    .five{left:390px}
    .six{left:480px}
    .seven{left:570px}
</style>
<body>
<input type="button" value="停止动画" />
<div id="demo">
    <span class="one">01</span>
    <span class="two">02</span>
    <span class="three">03</span>
    <span class="four">04</span>
    <span class="five">05</span>
    <span class="six">06</span>
    <span class="seven">07</span>

</div
</body>

<script>
    /*******************************
     * @author Mr.Think
     * @author blog http://mrthink.net/
     * @2010.11.16
     * @可自由转载及使用,但请注明版权归属
     *******************************/
    $(function(){
        //可用animate()方法如此眩晕地实现
//	$('.one').delay(500).animate({top:'+=290px'},500,function(){
//		$('.two').delay(500).animate({top:'+=290px'},500,function(){
//			$('.three').delay(500).animate({top:'+=290px'},500,function(){
//				$('.four').delay(500).animate({top:'+=290px'},500,function(){
//					$('.five').delay(500).animate({top:'+=290px'},500,function(){
//						$('.six').delay(500).animate({top:'+=290px'},500,function(){
//							$('.seven').animate({top:'+=290px'},500,function(){
//								alert('按序落体运动结束! Yeah!')
//							});
//						});
//					});
//				});
//			});
//		});
//	});

        //还可以利用queue()方法简明自如的实现
        var _slideFun=[
            //把要执行的动画依次放入一个数组
            function(){
                $('.one').delay(500).animate({top:'+=290px'},
                500,
                _takeOne);
            },
            function(){$('.two').delay(300).animate({top:'+=290px'},500,_takeOne);},
            function(){$('.three').delay(300).animate({top:'+=290px'},500,_takeOne);},
            function(){$('.four').delay(300).animate({top:'+=290px'},500,_takeOne);},
            function(){$('.five').delay(300).animate({top:'+=290px'},500,_takeOne);},
            function(){$('.six').delay(300).animate({top:'+=290px'},500,_takeOne);},
            function(){$('.seven').delay(300).animate({top:'+=290px'},500,function(){
                alert('按序落体运动结束! Yeah!');
            });}
        ];
        //将函数数组放入slideList动画队列
        $('#demo').queue('slideList',_slideFun);
        var _takeOne=function(){
            //取出第一个函数,并执行它
            $('#demo').dequeue('slideList');
        };
        //初始执行第一个函数
        _takeOne();

        $(':button').click(function(){
            $(this).val('刷新重试').attr('disabled',true).css('color','#ccc');
            //停止也可用载入空数组实现$('#demo').queue('slideList',[]);
            $('#demo').clearQueue('slideList');
        });
    });
</script>